<template>
  <div style="width: 100%;">
    <div class="card-header">
      <span class="sum-title">党员总数（人）
        <span class="value"> 256 </span>
      </span>
    </div>
    <div class="ball-list">
      <div v-for="data in dataList">
        <ball-data :data="{label:data.label,value:data.value}"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BallData from "@/views/components/left/left-top/BallData.vue";
import {reactive} from "vue";


let dataList: Data[] = reactive([])

interface Data {
  label: string,
  value: number
}

function getData() {
  dataList = [{
    label: '正式党员（人）',
    value: 169
  }, {
    label: '预备党员（人）',
    value: 33
  }, {
    label: '流动党员（人）',
    value: 42
  }, {
    label: '发展党员（人）',
    value: 12
  }]
}

getData()
</script>

<style lang="less" scoped>
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/preview (14).png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  min-height: 75px;
}

.sum-title {
  font-family: "Source Han Sans-FVS Normal";
  justify-content: flex-start;
  color: rgb(255, 240, 177);
  font-size: 16px;

  .value {
    font-family: "D-DIN-PRO-FVS Medium";
    justify-content: center;
    color: rgb(255, 254, 220);
    font-size: 30px;
    writing-mode: horizontal-tb;
    word-spacing: 0px;
    letter-spacing: 2px;
    text-orientation: upright;
    filter: drop-shadow(rgba(255, 254, 220, 0.7) 0px 2px 8px);
    user-select: text;
  }
}

.ball-list {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
